<template>
    <!-- 备案 -->
    <div class="app-container">
        <div class="recordContent">
            <div class="">搜素条件</div>
            <el-form
                :model="queryParams"
                ref="queryForm"
                size="small"
                :inline="true"
                label-width="120px"
                >
                <el-form-item label="申报时间" prop="time">
                    <el-date-picker clearable
                        v-model="queryParams.time"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择申报时间">
                        </el-date-picker>
                </el-form-item>
                <el-form-item label="工程名称" prop="name">
                    <el-input
                        v-model="queryParams.name"
                        placeholder="请输入工程名称"
                        clearable
                        @keyup.enter.native="handleQuery"
                        />
                </el-form-item>
                <el-form-item label="有效状态" prop="state">
                    <el-select
                    v-model="queryParams.state"
                    clearable
                    >
                        <el-option
                            v-for="(v,index) in stateList"
                            :key="index"
                            :label="v.label"
                            :value="v.value"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="recordList">
            <el-row>
                <el-col :span="8" style="">
                    <el-card class="box-card">
                        <div>龙湖天街建设工程</div>
                        <div>所属区域:<span></span></div>
                        <div>龙湖天街建设工程</div>
                        <div>
                            <el-button ></el-button>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="8" style="padding: 10px;">
                    <el-card class="box-card">
                        <div>龙湖天街建设工程</div>
                        <div>所属区域:<span></span></div>
                        <div>龙湖天街建设工程</div>
                    </el-card>
                </el-col>
                <el-col :span="8" style="padding: 10px;">
                    <el-card class="box-card">
                        <div>龙湖天街建设工程</div>
                        <div>所属区域:<span></span></div>
                        <div>龙湖天街建设工程</div>
                        <div><el-button></el-button></div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
  
    </div>
  </template>
  
  <script>
    import * as echarts from 'echarts'
    

  export default {
    name: "Record",
    components: {  },
    data() {
      return {
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          state: '',
          name: '',
          time: '',
        },
        dataList: [],
        loading: false,
        stateList: [],
        chart: null,
      };
    },
    mounted() {
        this.getEchartsData()
            
    },
    methods: {
        handleQuery(){
            // this.getEchartsData()
        },
        getEchartsData(){
            this.chart = echarts.init(this.$refs.siteEcharts, "macarons")

            this.chart.setOption({
                title : {
                    text: '消纳场所',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                calculable : true,
                series : [
                    {
                        name:'区域',
                        type:'pie',  
                        // center: ['50%', '60%'],
                        radius: ['40%', '60%'], // 设置内半径和外半径，这里设置饼图大小
                        data:[
                            {value:15, name:'待整改'},
                            {value:8, name:'待审核'},
                            {value:42, name:'已完成'},
                            {value:12, name:'审核中'}
                        ]
                    }
                ]

            })
        },
        toAdd(){
            this.$router.push({path: '/recordAdd'})
        },
        toDesc(){

        }
    }
  };
  </script>
  
  <style scoped lang="scss" >
  .recordContent{
    // padding: 20px;
  }
  .box-card{
    padding: 10px;
  }
  </style>